<template>
	<view>
		<div class="placeHolder"></div>
		<div class="tabbar">
			<div class="item" v-for="(item, index) in list" :class="{'active': page == index + 1}" @click="goPage(item)">
				<image class="icon icon1"  mode="aspectFill" :src="item.iconPath"></image>
				<image class="icon icon2"  mode="aspectFill" :src="item.selectedIconPath"></image>
				<div class="text">{{item.text}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		goLogin
	} from '@/utils/utils.js'
	export default {
		name:"pageTabbar",
		props: ['page'],
		data() {
			return {
					"list": [{
							"pagePath": "/pages/index/index",
							"iconPath": require("../static/icon1.png"),
							"selectedIconPath": require("../static/icon1_1.png"),
							"text": "首页"
						},
						// {
						// 	"pagePath": "/pages/search/search",
						// 	"iconPath": require("../static/icon2.png"),
						// 	"selectedIconPath": require("../static/icon2_1.png"),
						// 	"text": "搜索"
						// },
						{
							"pagePath": "/pages/bookmark/bookmark",
							"iconPath": require("../static/icon2.png"),
							"selectedIconPath": require("../static/icon2_1.png"),
							"text": "书签"
						},
						{
							"pagePath": "/pages/more/more",
							"iconPath": require("../static/icon3.png"),
							"selectedIconPath": require("../static/icon3_1.png"),
							"text": "我的"
						}
					]
			};
		},
		methods: {
			goPage(item) {
				let token = uni.getStorageSync('token')
				if (item.text === '书签' && !token) {
					goLogin('/', 'navigateTo')
				} else {
					uni.reLaunch({
						url: item.pagePath
					});
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
.tabbar{
	 position: fixed; left: 0; bottom: 0; width: 100%; height: 50px; border-top: 1px solid #ccc;
	display: flex; background-color: #fff;
	.item{
		flex: 1;
		.icon{
			width: 24px; height: 24px; margin: 5px auto 0px;
		}
		.icon1{
			display: block;
		}
		.icon2{
			display: none;
		}
		.text{
			text-align: center; font-size: 12px; color: #666;
		}
		
		&.active{
			.icon1{
				display: none;
			}
			.icon2{
				display: block;
			}
			.text{
			 color: #39A6FF;
			}
		}
		
	}
}

.placeHolder{
	height: 50px;
}
</style>